<template>
	<div style="background: #fff;padding-bottom: 50px;">
		<div class="h_c padding_left bgd_color font_size_t">
			编辑角色
		</div>
		<div class="extra_wrap" style="padding: 15px 0;">
			<el-row class="l_heigth40" style="padding-left: 40px;">
				<el-col :span="6">
					角色名：{{edit.name}}
				</el-col>
				<el-col :span="6">
					部门：{{edit.departmentName}}
				</el-col>
				<el-col :span="12">
					区域权限：{{edit.province}} {{edit.city}} {{edit.area}}
				</el-col>
			</el-row>
			<el-row class="l_heigth40" style="padding-left: 40px;">
				<el-col :span="8">
					角色说明：{{edit.desc}}
				</el-col>
			</el-row>
		</div>
		<div class="role_p" style="padding: 0 10px 40px 0">
			<el-row :gutter="20">
				<el-col :span='3' style="text-align: right;">
					权限配置:
				</el-col>
				<el-col :span='21'>
					<ul class="role-table col-xs-offset-2 col-md-offset-1 col-sm-offset-2" style="margin-top: 0px;">
						<li class="header">
							<div class="left">菜单列表</div>
							<div class="right">功能权限</div>
						</li>
						<div class="vertical-line"></div>
						<li v-for="(item,index) in edit.perms" :key="item.id">
							<!--一级菜单start-->
							<div class="left h40" @click="fold(item)">
								<i :class="{'el-icon-caret-right':item.folded,'el-icon-caret-bottom':!item.folded}" v-cloak v-if="item.second" class="item-icon"></i>
								<span v-cloak>{{item.title}}</span>
							</div>
							<div class="right h40">
								<el-checkbox @change="parentCheckedRead(item)" v-model="item.canRead" disabled v-cloak> 查询</el-checkbox>
								<el-checkbox @change="parentCheckedEdit(item)" v-model="item.canEdit" disabled v-cloak> 修改</el-checkbox>
								<el-checkbox @change="parentCheckedDel(item)" v-model="item.canDel" disabled v-cloak> 删除</el-checkbox>
							</div>
							<!--一级菜单end-->
							<div class="line"></div>
							<!--二级菜单start-->
							<ul v-show="item.second&&!item.folded">
								<li class="h40" v-for="(second,cur) in item.second" :key="second.id">
									<div class="left">
										<span v-cloak>{{second.title}}</span>
									</div>
									<div class="right">
										<el-checkbox @change="secondCheckedRead(item)" v-model="second.canRead" disabled v-cloak> 查询</el-checkbox>
										<el-checkbox @change="secondCheckedEdit(item)" v-model="second.canEdit" disabled v-cloak> 修改</el-checkbox>
										<el-checkbox @change="secondCheckedDel(item)" v-model="second.canDel" disabled v-cloak> 删除</el-checkbox>
									</div>
									<div class="line"></div>
								</li>
							</ul>
						</li>
					</ul>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
	import http from '@/assets/js/http.js'
	import VDistpicker from 'v-distpicker'

	export default {
		components: {
			VDistpicker,
		},
		data() {
			return {
				edit: {
					roleId: '',
					name: '',
					departmentId: '',
					departmentName: '',
					desc: '',
					province: '',
					city: '',
					area: '',
					perms: []
				},
				departmentId_list: [], //下拉数据
			}
		},
		created() {
			this.edit.roleId = this.$route.query.roleId
			this.fetchDetail()
			this.selectData()
		},
		methods: {
			roleHandler(perm) {
				var rPerm = []
				perm.map(i => {
					var item = {}
					item = {
						menuId: i.menuId,
						canRead: i.canRead,
						canEdit: i.canEdit,
						canDel: i.canDel,
					}
					rPerm.push(item);
				})
				perm.map(i => {
					i.second.map(childi => {
						var item = {}
						item = {
							menuId: childi.menuId,
							canRead: childi.canRead,
							canEdit: childi.canEdit,
							canDel: childi.canDel,
						}
						rPerm.push(item);
					})
				})
				return rPerm;
			},
			roleMenuHandler(perm) {
				var rPerm = []
				perm.map(i => {
					var item = {}
					if(i.parentId == 0) {
						item = {
							title: i.name,
							menuId: i.menuId,
							canRead: i.canRead,
							canEdit: i.canEdit,
							canDel: i.canDel,
							second: []
						}
						rPerm.push(item);
					}
				})
				perm.map(i => {
					var item = {}
					if(i.parentId != 0) {
						item = {
							title: i.name,
							menuId: i.menuId,
							canRead: i.canRead,
							canEdit: i.canEdit,
							canDel: i.canDel,
						}
						rPerm.map(childi => {
							if(childi.menuId == i.parentId) {
								childi.second.push(item)
							}
						})
					}
				})
				return rPerm;
			},
			fetchDetail() {
				this.apiGet("/api/backend/base/role/detail?roleId=" + this.edit.roleId).then(res => {
					if(res.code == 200) {
						this.edit.name = res.data.name
						this.edit.desc = res.data.desc
						this.edit.province = res.data.province
						this.edit.city = res.data.city
						this.edit.departmentName = res.data.departmentName
						this.edit.name = res.data.name
						this.edit.perms = this.roleMenuHandler(res.data.perms)
					}
				})
			},
			ModifyBtn() {
				this.edit.perms = this.roleHandler(this.edit.perms)
				this.apiPost("/api/backend/base/role/modify", this.edit).then(res => {
					if(res.code == 200) {
						this.$message({
							type: 'success',
							message: "修改成功"
						})
						this.$router.push({
							name: '角色列表'
						})
					}
				})
			},
			fold: function(item) {
				if(typeof item.folded === "undefined") {
					this.$set(item, "folded", true);
				} else {
					item.folded = !item.folded;
				}
			},
			parentCheckedRead: function(item) {
				if(item.canRead) {
					item.second.map(i => {
						i.canRead = true;
					})
				} else {
					item.second.map(i => {
						i.canRead = false;
					})
				}
			},
			parentCheckedEdit: function(item) {
				if(item.canEdit) {
					item.second.map(i => {
						i.canEdit = true;
					})
				} else {
					item.second.map(i => {
						i.canEdit = false;
					})
				}
			},
			parentCheckedDel: function(item) {
				if(item.canDel) {
					item.second.map(i => {
						i.canDel = true;
					})
				} else {
					item.second.map(i => {
						i.canDel = false;
					})
				}
			},
			secondCheckedRead: function(item) {
				var isAll = false;
				isAll = item.second.every(function(im) {
					return im.canRead;
				})
				if(isAll) {
					item.canRead = true;
				} else {
					item.canRead = false;
				}
			},
			secondCheckedEdit: function(item) {
				var isAll = false;
				isAll = item.second.every(function(im) {
					return im.canEdit;
				})
				if(isAll) {
					item.canEdit = true;
				} else {
					item.canEdit = false;
				}
			},
			secondCheckedDel: function(item) {
				var isAll = false;
				isAll = item.second.every(function(im) {
					return im.canDel;
				})
				if(isAll) {
					item.canDel = true;
				} else {
					item.canDel = false;
				}
			},
			//获取下拉框数据
			selectData() {
				let that = this;
				//部门字典
				this.apiGet("/api/dict/department/list", null).then(res => {
					if(res.code == 200) {
						that.departmentId_list = res.data.departments
					}
				})
			},
			onChangeProvince1(data) {
				this.edit.province = data.value;
			},
			onChangeCity1(data) {
				this.edit.city = data.value;
			},
			onChangeArea1(data) {
				this.edit.area = data.value;
			},
		},

		mixins: [http]
	}
</script>
<style scoped>
	.bgd_color {
		background: rgba(24, 144, 255, 1);
		color: #FFFFFF;
	}
	
	.padding_left {
		padding-left: 20px;
	}
	
	.font_size_t {
		font-size: 18px;
		line-height: 40px;
	}
	
	li {
		list-style: none;
	}
	
	.role-table {
		border: 1px solid #e0e0e0;
		border-bottom: none;
		padding: 0;
		position: relative;
	}
	
	.header {
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #e7e7e7;
		background: #F8F8F9;
		text-align: center;
	}
	
	.vertical-line {
		width: 1px;
		height: 100%;
		background: #ddd;
		position: absolute;
		left: 30%;
		top: 0
	}
	
	.left {
		width: 30%;
		float: left;
		padding-left: 10px;
		user-select: none;
		cursor: pointer;
	}
	
	.one {
		padding-left: 20px;
	}
	
	.right {
		width: 66%;
		float: left;
		padding-left: 10px;
	}
	
	.item-icon {
		margin-left: -5px;
		padding: 5px;
	}
	
	.line {
		clear: both;
		width: 100%;
		height: 1px;
		background: #e0e0e0;
	}
	
	.h40 {
		height: 39px;
		line-height: 39px;
	}
	
	[v-cloak] {
		display: none;
	}
	
	.text_r {
		text-align: right;
	}
	
	.l_heigth40 {
		line-height: 60px;
	}
</style>